<template>
    <div>
        <h2>{{msg}}</h2><br/>
        <div>
            <!-- vuex数据仓库中的count值,  自己对象中的count属性值 -->
            <h2>{{count}}-{{age}}</h2>
        </div>
        <br/>
        <!-- 调用mutations的方法改变count值,固定写法 -->
        <div>
            <button class="btn btn-danger" @click="add(5)">+</button>
            <button class="btn btn-default" @click="reduce">-</button>
        </div>
        <br/>
        <div>
            <button @click="addAction">异步+</button>
            <button @click="reduceAction">异步-</button>
        </div>
    </div>

</template>

<script>
// 引入vuex的store状态仓库与 mapState
import store from "@/vuex/store";
//  引入mapState ,可直接使用属性名,必须使用{} ,否则报错
//引入mapMutations 可直接使用方法名
import { mapState, mapMutations,mapGetters,mapActions } from "vuex";
export default {
    data() {
        return {
            msg: "Hello vuex!"
        };
    },
    //利用计算属性,在输出前对自己的count进行赋值
    // computed:{
    //     count(){
    //         return this.$store.state.count;
    //     }
    // },
    //使用mapState直接赋值
    // computed:mapState({
    //     count:state=>state.count
    // }),
    // 使用数组,必须与state对象中的属性同名
    computed: {
        //map系列的如果要与其他属性或方法共用都需要使用费...扩展运算符
        ...mapState(["count", "age"]),
        //计算属性中使用getter的过滤
        // count(){
        //     return this.$store.getters.count;
        // }
        //或者使用mapGetter模板
        // ...mapGetters(['count'])
    },
    //使用mapMutations数组,替换方法名
    methods:{
        ...mapMutations(["add", "reduce"]),
        ...mapActions(['addAction','reduceAction'])
    },
    //引用vuex仓库,必须
    store
};
</script>
<style>
</style>


